<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../js/easyui-1.3.5/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../js/easyui-1.3.5/themes/icon.css" />
<script src="../js/easyui-1.3.5/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/easyui-1.3.5/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/easyui-1.3.5/jquery.edatagrid.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var rootName = ajax.getRootName();
var uri = rootName + "/HistoryKoalaCallback"
$(function() {
  $('#dg').edatagrid({
    rownumbers:true,
    singleSelect:true,
    pagination:true,
    url:uri+'/list',
    saveUrl:uri+'/save',
    destroyUrl:uri+'/destroy',
    updateUrl:uri+'/update',
    onError: function(index, row) {
      alert(row.msg);
    },
    toolbar:[
      {text:"add",iconCls:"icon-add",handler:function(){
        $('#dg').edatagrid('addRow');
      }},
      {text:'remove',iconCls:"icon-remove",handler:function(){
        $('#dg').edatagrid('destroyRow');
        
      }},
      {text:"save",iconCls:'icon-save',handler:function(){
        $('#dg').edatagrid('saveRow');
      }},
      {text:'undo',iconCls:'icon-undo',handler:function(){
        $('#dg').edatagrid('cancelRow');
      }}
    ],
  });
});
function fromatDataTime(value, row, index) {
  var date = new Date(value*1000);
  var localString = date.toLocaleString()
  return localString;
}
</script>
</head>

<body>
<table id="dg" title="koala callback history" idField="id">
  <thead>
    <tr>
      <th field="id" editor={type:'validatebox',options:{required:true}}>id</th>
      <th field="ip" editor={type:'validatebox',options:{required:true}}>ip</th>
      <th field="screenToken" editor={type:'validatebox',options:{required:true}}>screenToken</th>
      <!--
      <th field="photo" editor={type:'validatebox',options:{required:true}}>photo</th>
      -->
      <th field="timestamp" editor={type:'validatebox',options:{required:true}} formatter='fromatDataTime'>timestamp</th>
      <th field="photoMD5" editor={type:'validatebox',options:{required:true}}>photoMD5</th>
      <th field="age" editor={type:'validatebox',options:{required:true}}>age</th>
      <th field="gender" editor={type:'validatebox',options:{required:true}}>gender</th>
      <th field="quality" editor={type:'validatebox',options:{required:true}}>quality</th>
      <th field="subjectId" editor={type:'validatebox',options:{required:true}}>subjectId</th>
      <th field="name" editor={type:'validatebox',options:{required:true}}>name</th>
      <th field="subjectGender" editor={type:'validatebox',options:{required:true}}>subjectGender</th>
      <th field="sayHello" editor={type:'validatebox',options:{required:true}}>isSayHello</th>
    </tr>
  </thead>
</table>
</body>

</html>